﻿<!DOCTYPE HTML>
<html>
<head>  
    <meta charset="utf-8" /> 
    <title>SuperMap iClient for JavaScript</title>
	<style>
		#map{
			border:0px solid;
		}
	</style>
	<script type="text/javascript" src="js/cordova-2.7.0.js"></script>
	<script src="js/jquery.js"></script>
    <script src="libs/SuperMap.Include.js"></script>
	<script src="js/LocationControl.js"></script>
    <script type="text/javascript">
    var map, layer,markerLayer,locationCtrl;
    function init() {
	    SuperMap.Util.setApp(true);
        map = new SuperMap.Map("map",{controls: [                      
				new SuperMap.Control.ScaleLine(),
				new SuperMap.Control.Zoom(),
				new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
			]
        });   
		layer = new SuperMap.Layer.CloudLayer();
		markerLayer = new SuperMap.Layer.Markers("Markers");
        map.addLayers([layer,markerLayer]);      
		map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4); 	
    }
	function locating(){
		if(!locationCtrl){
			locationCtrl = new SuperMap.LocationControl();
		}
		locationCtrl.local(onSuccess,onError,5000);
	}
	// 获取位置信息成功时调用的回调函数
	function onSuccess(position) {
		transCoordinate(position.lon,position.lat,
			function(position){
				var lat = position.lat;  
				var lon = position.lon; 
				markerLayer.clearMarkers();
				
				var size = new SuperMap.Size(44, 33);
				var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
				var icon = new SuperMap.Icon("./img/mark.png", size, offset);
						  
				markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(lon, lat), icon));
				map.setCenter(new SuperMap.LonLat(lon, lat));
			},
			function(){
				alert("坐标转换失败!");
			}
		);
	}
	// onError回调函数
	function onError(msg) {
	  alert(msg);
	}
	//云服务转换坐标	
	function transCoordinate(lon,lat,onSuccess,onError){   
        var urlCoordinate="http://services.supermapcloud.com/iserver/cloudhandler";
        
        var lon_Cloud = lon;
        var lat_Cloud = lat;
        
        var param = "{\"x\":" + lon_Cloud + ",\"y\":" + lat_Cloud + "}";
        var data = {"servicename":"coordinateService","methodname":"convertGPS2SM","parameter":param};
        
        jQuery.ajax({
            "dataType":"jsonp",
            "jsonp":"jsonp",
            "type":"GET",
            "url":urlCoordinate,
            "data":data,
            "success":function(onSuccess){
				return function(cb){
					var position = {
						"lon":cb.result[0].x,
						"lat":cb.result[0].y
					};
					onSuccess(position);
				}
            }(onSuccess),
            "error":onError
        });
    }
	document.addEventListener("deviceready",init,false);
	</script>
</head>
<body>
    <div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div> 
	<input id="button" style="position:absolute;right:5px;top:5px;z-index:999" value="定位" type="button" ontouchend="locating()"></input>	
</body>
</html>